<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- STYLESHEETS -->
  <!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
  <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
  <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
  <link rel="stylesheet" type="text/css" href="../../css/responsive.css">
  <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <!-- SELECT2 -->
  <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />
  <!-- UNIFORM -->
  <link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css" />
  <!-- datatable -->
  <link rel="stylesheet" href="../../js/datatables/datatable.css">
  <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
  <style>
    .dataTables_scrollHeadInner {
      width: auto !important;
    }
    .dataTables_scrollHeadInner table {
      width:  100% !important;
    }
    .dataTables_scrollHeadInner table th {
      text-align: center;
    }
    .dataTables_scrollBody table td {
      text-align: center;
    }
  </style>
</head>

<body>
  <header class="navbar clearfix" id="header">
  </header>

  <!-- PAGE -->
  <section id="page">
    <!-- SIDEBAR -->
    <div id="sidebar" class="sidebar">
      <div class="sidebar-menu nav-collapse">
        <!-- SIDEBAR MENU -->
        <ul>
        </ul>
      </div>
    </div>
    <!-- /SIDEBAR -->
    <div id="main-content">
      <!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
      <div class="modal fade" id="inStock_config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" style="width: 800px">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">退换货入库</h4>
            </div>
            <div class="modal-body" style="min-height:200px">
              <div class="col-md-12">
                <table id="sku_list" class="table table-bordered">
                  <thead>
                    <tr>
                      <th class='skuId' style='display:none'></th>
                      <th>商品名称</th>
                      <th>SKU编码</th>
                      <th>颜色/规格</th>
                      <th>尺码</th>
                      <th>数量</th>
                      <th>处理方式</th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                </table>
              </div>


            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-success bt-save">保存</button>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div id="content" class="col-lg-12">
            <!-- PAGE HEADER-->
            <div class="row">
              <div class="col-sm-12">
                <div class="page-header">
                  <!-- STYLER -->

                  <!-- /STYLER -->
                  <!-- BREADCRUMBS -->
                  <ul class="breadcrumb">
                    <li>
                      <i class="fa fa-home"></i>
                      <a href="index.html">首页</a>
                    </li>
                    <li>
                      <a href="#">订单管理</a>
                    </li>
                    <li>退换货率</li>
                  </ul>
                  <!-- /BREADCRUMBS -->
                </div>
              </div>
            </div>
            <!-- /PAGE HEADER -->
            <!-- FORMS QUERY-->
            <div class="row">
              <div class="col-md-12">
                <div class="row">
                  <div class="col-md-12">
                    <div class="box border primary">
                      <div class="box-title">
                        <h4><i class="fa fa-bars"></i>查询条件</h4>
                      </div>
                      <div class="box-body big" style="padding:10px;">
                        <form class="form-horizontal" role="form" id="form_Order"
                          action="../../admin/returnorder/exportReturnOrderReport.do">
                          <div class="form-group mrg-bt10">
                            <label class="col-sm-1 control-label">申请日期：</label>
                            <div class="col-sm-5">
                              <div class="col-sm-6" style="padding:0;width: calc(50% - 20px)">
                                <input type="text" name="startDate" class="form-control bootstrap-datepicker">
                              </div>
                              <div style="width: 40px;float:left;text-align: center;">至</div>
                              <div class="float-left col-sm-6" style="padding:0;width: calc(50% - 20px)">
                                <input type="text" name="endDate" class="form-control bootstrap-datepicker">
                              </div>
                            </div>
                            <label class="col-sm-1 control-label" for="e1">退换货类型：</label>
                            <div class="col-sm-2">
                              <select id="returnType" name="returnType" class="col-md-12 select2-offscreen"
                                tabindex="-1">
                                <option value=''>全部</option>
                                <option value="Return">退货</option>
                                <option value="Change">换货</option>
                              </select>
                            </div>
                          </div>
                          <div class="form-group mrg-bt10">
                            <label class="col-sm-1 control-label">商品ID：</label>
                            <div class="col-sm-2">
                              <input type="text" id="productIds" class="form-control" name="productIds"
                                placeholder="请输入商品ID">
                            </div>
                            <label class="col-sm-1 control-label">销售平台：</label>
                            <div class="col-sm-2">
                              <select id="platformNo" name="platformNo" class="col-md-12 select2-offscreen"
                                tabindex="-1">
                                <option value=''>全部</option>
                                <option value="M000">壹果</option>
                                <option value="M001">壹家店</option>
                              </select>
                            </div>
                            <label class="col-sm-1 control-label">申请原因：</label>
                            <div class="col-sm-2">
                              <select id="returnReasonType" name="returnReasonType" class="col-md-12 select2-offscreen"
                                tabindex="-1">
                                <option value=''>全部</option>
                                <option value="WithoutReason">七天无理由</option>
                                <option value="ReturnDifference">退差价</option>
                                <option value="OutPreSale">超出预售期，不想等了</option>
                                <option value="SizeNotMatch">尺码与描述不符</option>
                                <option value="LessMissWrong">少发/漏发/错发</option>
                                <option value="BadWork">做工不好</option>
                                <option value="QualityIssues">质量问题</option>
                                <option value="Other">其他</option>
                              </select>
                            </div>
                            <div class="col-sm-1">
                              <a class="btn btn-primary search"><i class="fa fa-search"></i> 查询</a>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- /FORMS QUERY -->

            <div class="row" style="height: 30px;">
              <div class="col-md-12">
                <div class="box ">
                  <a href="javaScript:;" class="btn btn-success export">
                    <i class="fa  fa-plus-square-o"></i> 导出
                  </a>
                </div>
              </div>
            </div>
            <div class="row">
              <!-- TABLES -->
              <div class="col-md-12">
                <!-- BOX -->
                <div class="box border primary">
                  <div class="box-title">
                    <h4><i class="fa fa-table"></i>退换货率</h4>

                  </div>
                  <div class="box-body" id="box-body">
                    <table id="db_Order_list" cellpadding="0" cellspacing="0" border="0"
                      class="datatable table table-striped table-bordered table-hover">

                    </table>
                  </div>
                </div>
                <!-- /BOX -->
              </div>
            </div>
            <!-- /TABLES -->
            <div class="footer-tools">
              <span class="go-top">
                <i class="fa fa-chevron-up"></i> Top
              </span>
            </div>
          </div><!-- /CONTENT-->
        </div>
      </div>
    </div>
  </section>
  <!--/PAGE -->
  <!-- JAVASCRIPTS -->
  <!-- Placed at the end of the document so the pages load faster -->
  <!-- JQUERY -->
  <script src="../../js/jquery/jquery-2.0.3.min.js"></script>

  <!-- BOOTSTRAP -->
  <script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
  <!-- BLOCK UI -->
  <script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>

  <!-- AUTOSIZE -->
  <script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
  <!-- spinner -->
  <script src="../../js/spinner/spin.js"></script>
  <!-- DATA TABLES -->
  <script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
  <script type="text/javascript" src="../../js/datatables/datatable.js"></script>
  <script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
  <script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
  <script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>

  <!-- INPUT MASK -->
  <script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
  <!--bootbox-->
  <script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
  <!-- SELECT2 -->
  <script type="text/javascript" src="../../js/select2/select2.min.js"></script>
  <!-- UNIFORM -->
  <script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
  <script type="text/javascript" src="../../js/datepicker/datepicker.js"></script>
  <script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
  <!-- COOKIE -->
  <script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
  <!-- CUSTOM SCRIPT -->
  <script src="../../js/script.js"></script>
  <script src="../../js/common.js"></script>
  <script>
    var rate = {
      init: function () {
        $('#returnType,#platformNo,#returnReasonType').select2();
        $.initDate($("#form_Order"), -30, 0);
        this.searchReturnOrder()
        var _self = this
        $('.search').click(function() {
          _self.searchReturnOrder()
        })
        $(".export").click(function(){
          $("#form_Order").submit();
        });
      },
      searchReturnOrder: function () {
        var $mainDataTable = null;
        $("#box-body").html('<table id="db_Order_list" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover"></table>')
        var returnType = $('#returnType').val();
        var returnReasonType = $("#returnReasonType").val();
        var platformNo = $('#platformNo').val();
        var productIds = $('#productIds').val();
        var startDate = $('input[name=startDate]').val();
        var endDate = $('input[name=endDate]').val();
        var url = App.getContextPath() + 'admin/returnorder/returnOrderReport.do?returnType=' + returnType
          + '&returnReasonType=' + returnReasonType + '&platformNo=' + platformNo + '&productIds=' + productIds;
        if (startDate != '') {
          url += '&startDate=' + startDate;
        }
        if (endDate != '') {
          url += '&endDate=' + $.dateAdd(endDate);
        }
        console.log(url)
        var aoColumns = [{
          "mDataProp": "salesPlatformDesc",
          "sTitle": "销售平台",
          "width": "10%"
        }, {
          "mDataProp": "productName",
          "sTitle": "商品名称",
          "width": "10%",
          "sClass": 'productName'
        }, {
          "mDataProp": "returnTypeDesc",
          "sTitle": "退换货类型",
          "width": "10%"
        },{
          "mDataProp": "returnReasonTypeDesc",
          "sTitle": "申请原因",
          "width": "10%"
        },{
          "sTitle": "退换货数量",
          "width": "10%",
          "render":function(data, type, row){
              if (row.returnReasonType === 'ReturnDifference') return row.returnOrderCount
              return row.returnItemQuantity
          }
        }, {
          "sTitle": "退换货率",
          "width": "10%",
          "render":function(data, type, row){
            if (row.returnReasonType === 'ReturnDifference') return (row.returnCountRate * 100).toFixed(2) + '%'
            return (row.returnItemRate * 100).toFixed(2) + '%'
          }
        }]
        if (!productIds) {
          aoColumns.splice(1,1)
        }
        // if($mainDataTable){
        //     $mainDataTable.api().ajax.url(url).load();
        //     return;	
        // }
        var dtSetting = $.dataTableSetting({
          "ajaxSource": url,
          "serverSide": true,
          "bFilter": false,// 去掉搜索框
          "bLengthChange": true,// 每页显示数量							
          "sScrollX": "100%",
          "sScrollXInner": "100%",
          "iDisplayLength": 25,

          "bSort": false,
          "aoColumns": aoColumns
        });
        // if ($mainDataTable) {
        //   $mainDataTable.clear()
        // }
        $mainDataTable = $("#db_Order_list").dataTable(dtSetting);
      }
    }
    $(function () {
      $("#header").load("../head.html");
      App.init(); //Initialise plugins and elements
      rate.init()
    });
  </script>
</body>

</html>